<style lang="less">
.flow-data {
  display: grid;
  grid-template-rows: 72px 160px 300px 300px 300px 654px;
  row-gap: 12px;
  .flow-data__row {
    .flow-data__row-item {
      box-sizing: border-box;
      padding: 20px;
      height: 100%;
      background: #fff;
      border-radius: 2px;
      .flow-data__row-title {
        color: #262626;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 16px;
        &--more {
          color: #595959;
          font-size: 14px;
        }
        &--between {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .choose-time {
            color: #595959;
            font-size: 14px;
            .time {
              cursor: pointer;
              &.active {
                color: #386cff;
              }
              & + .time {
                margin-left: 16px;
              }
            }
          }
        }
      }
    }
    // 第一行
    &:nth-of-type(1) {
      .flow-data__row-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .update-time {
          color: #101010;
          font-size: 14px;
          .update-time-title {
            margin-right: 8px;
            color: #808080;
          }
        }
      }
    }
    // 第二行
    &:nth-of-type(2) {
      .flow-data__row-content {
        height: 80px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 12px;
        box-sizing: border-box;
        .content__item {
          background: #f4f5f7;
          border-radius: 2px;
          padding: 16px 16px 12px;
          min-width: 243px;
          .content__title {
            margin-bottom: 12px;
            line-height: 16px;
            color: #595959;
            font-size: 12px;
            &--between {
              display: flex;
              justify-content: space-between;
            }
          }
          .content__data {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .data__number {
              color: #262626;
              font-size: 20px;
              font-weight: 600;
              &--yellow {
                color: #ffb53c;
              }
            }
            .data__tip {
              color: #808080;
              font-size: 12px;
              &--red {
                color: #ff3c3c;
              }
            }
          }
        }
      }
    }
    // 第三、四、五行
    &:nth-of-type(3),
    &:nth-of-type(4),
    &:nth-of-type(5) {
      .flow-data__row-content {
        height: 220px;
      }
    }
    // 第六行
    &:nth-of-type(6) {
      display: flex;
      .flow-data__row-item {
        flex: 1;
        .flow-data__row-content {
          height: 574px;
          .arco-table-element {
            .arco-table-tr {
              height: 48px;
              .arco-table-td {
                &:nth-last-of-type(1) {
                  .arco-table-td-content {
                    span {
                      cursor: pointer;
                      color: #386cff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="flow-data">
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <a-range-picker
          style="width: 240px"
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
          format="YYYY-MM-DD HH:mm"
        />
        <!-- <p class="update-time">
          <span class="update-time-title">数据更新时间：</span>
          <span>2022-05-26 12:43:13</span>
        </p> -->
      </div>
    </div>
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <p class="flow-data__row-title">流量数据</p>
        <div class="flow-data__row-content">
          <div class="content__item" v-for="it in activityData" :key="it.title">
            <p class="content__title content__title--between">{{ it.title }}</p>
            <template v-if="it.increaseTitle">
              <p class="content__data">
                <span class="data__number">{{ it.data }}</span>
                <span class="data__tip">{{
                  `${it.increaseTitle}: ${it.increaseData}`
                }}</span>
              </p>
            </template>
            <template v-else>
              <p class="content__data">
                <span class="data__number">{{ it.data }}</span>
              </p>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <p class="flow-data__row-title flow-data__row-title--between">
          <span> 消耗总流量 </span>
          <a-select :style="{ width: '120px' }">
            <a-option>按天</a-option>
          </a-select>
        </p>
        <div class="flow-data__row-content">
          <!-- <echarts-line series-name="消耗总流量" /> -->
        </div>
      </div>
    </div>
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <p class="flow-data__row-title flow-data__row-title--between">
          <span> 消耗直播流量 </span>
          <a-select :style="{ width: '120px' }">
            <a-option>按天</a-option>
          </a-select>
        </p>
        <div class="flow-data__row-content">
          <!-- <echarts-line series-name="消耗直播流量" /> -->
        </div>
      </div>
    </div>
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <p class="flow-data__row-title flow-data__row-title--between">
          <span> 消耗回放流量 </span>
          <a-select :style="{ width: '120px' }">
            <a-option>按天</a-option>
          </a-select>
        </p>
        <div class="flow-data__row-content">
          <!-- <echarts-line series-name="消耗回放流量" /> -->
        </div>
      </div>
    </div>
    <div class="flow-data__row">
      <div class="flow-data__row-item">
        <p class="flow-data__row-title flow-data__row-title--between">
          <span>消耗总流量排行</span>
          <a-input-search
          :style="{ width: '243px' }"
          placeholder="搜索手机号/用户ID/用户名"
        />
        </p>
        <div class="flow-data__row-content">
          <a-table :columns="useAllFlowSortColumns" :data="useAllFlowSortData">
            <template #operation="{ record }">
              <span>详情</span>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import echartsLine from "@/components/echartsLine.vue";
const activityData = reactive([
  {
    title: "消耗总流量（TB）",
    data: "324,342",
  },
  {
    title: "消耗总成本（元）",
    data: "324,342",
  },
  {
    title: "消耗直播流量（TB）",
    data: "324,342",
    increaseTitle: "成本",
    increaseData: "2548",
  },
  {
    title: "消耗回放流量（TB）",
    data: "324,342",
    increaseTitle: "成本",
    increaseData: "2548",
  },
]);

// 消耗总流浪排行
const useAllFlowSortColumns: any = [
  {
    title: "排行",
    dataIndex: "sort",
  },
  {
    title: "用户昵称",
    dataIndex: "usernick",
  },
  {
    title: "手机号",
    dataIndex: "phone",
  },
  {
    title: "消耗总流量",
    dataIndex: "useAllFlow",
  },
  {
    title: "消耗直播流量",
    dataIndex: "useLiveFlow",
  },
  {
    title: "消耗回放流量",
    dataIndex: "usePlaybackFlow",
  },
  {
    title: "总成本",
    dataIndex: "allCost",
  },
  {
    title: "归属人",
    dataIndex: "attributor",
  },
  {
    title: "操作",
    slotName: "operation",
  },
];
const useAllFlowSortData = reactive([
  {
    sort: 1,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 2,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 3,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 4,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 5,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 6,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 7,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 8,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 9,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
  {
    sort: 10,
    usernick: "张三",
    phone: 17636644317,
    useAllFlow: "123.0TB",
    useLiveFlow: "123.0TB",
    usePlaybackFlow: "123.0TB",
    allCost: "￥213",
    attributor: "李四",
  },
]);
</script>
